<template>
    <!-- 权限数据展示 -->
    <el-table
        :data="permissionList"
        :tree-props="treeProps"
        row-key="id"
        border
    >
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="权限值" prop="Code"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作">
            <template #="{row}">
                <el-button @click="AddPermission(row)" type="primary" size="small" :disabled="row.level==4?true:false" v-isButton="`btnAddPermission`">{{row.level==3?'添加功能':'添加菜单'}}</el-button>
                <el-button @click="updatePermission(row)" type="primary" size="small" :disabled="row.level==1?true:false">修改</el-button>
                <el-popconfirm :title="`你确定要删除${row.name}吗?`" @confirm="removePermission(row)">
                    <template #reference>
                        <el-button type="primary" size="small" :disabled="row.level==1?true:false">删除</el-button>
                    </template>
                </el-popconfirm>
                
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="visible">
        <template #header>
            <h4>{{ParamasPermission.id?'修改菜单':'添加菜单'}}</h4>
        </template>
        <template #default>
            <el-form >
                <el-form-item label="名称" >
                    <el-input placeholder="请输入权限名称" v-model="ParamasPermission.name"></el-input>
                </el-form-item>
                <el-form-item label="权限" >
                    <el-input placeholder="请输入权限数值" v-model="ParamasPermission.Code"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisibleCandle ">取消</el-button>
            <el-button type="primary" @click="dialogSave">
            确定
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';

import  {reqGetPermission,reqAddOrUpdatePermission,reqDeletePermission} from '@/api/acl/permission/index'
import type {getPermissionList,ResponseGetPermission,getPermission}  from '@/api/acl/permission/type'
import { ElMessage } from 'element-plus';

//树形结构配置
const treeProps = {
    children: 'children',
    label: 'name'
}

//存储请求得到的权限数据
const permissionList=ref<getPermissionList>([])
//控制dialog对话框显隐
const visible=ref(false)
//存储新增|修改请求携带的参数数据
const ParamasPermission=ref<getPermission>({
    id:'',
    name:'',
    level:'',
    Code:'',
    parentId:''
})
onMounted(()=>{
    GetPermission()
})
//请求方法
const GetPermission=async()=>{
    let result:ResponseGetPermission=await reqGetPermission()
    if(result.code==200){
        permissionList.value=result.data
    }
}
//添加权限按钮回调
const AddPermission=(row:getPermission)=>{
    //dialog显示
    visible.value=true
    //清空之前添加或修改的内容
    Object.assign(ParamasPermission.value,{
        id:'',
        name:'',
        level:'',
        Code:'',
        parentId:''
    })
    //存储等级
    ParamasPermission.value.level=(row.level as number)+1
    //存储父级id
    ParamasPermission.value.parentId=row.id

}
//修改权限按钮回调
const updatePermission=(row:getPermission)=>{
    //dialog对话框显示
    visible.value=true
    //存储对应数据
    Object.assign(ParamasPermission.value,row)
}
//dailog对话框取消按钮回调
const dialogVisibleCandle=()=>{
    //隐藏dialog
    visible.value=false
}
//dialog对话框确定按钮回调
const dialogSave=async()=>{
    
    //发送请求
    let result=await reqAddOrUpdatePermission(ParamasPermission.value)
    if(result.code==200){
        ElMessage({
            type:'success',
            message:ParamasPermission.value.id?'更新成功':'添加成功'
        })
        //隐藏dialog
        visible.value=false
        //重新获取数据
        GetPermission()
    }else{
        ElMessage({
            type:'error',
            message:ParamasPermission.value.id?'更新失败':'添加失败'
        })
    }
}
//删除菜单权限的回调
const removePermission=async (row:getPermission)=>{
    //发送请求
    let result:ResponseGetPermission=await reqDeletePermission((row.id as number))
    if(result.code==200){
        ElMessage({
            type:'success',
            message:'删除成功'
        })
        //重新获取数据
        GetPermission()
    }else{
        ElMessage({
            type:'error',
            message:'删除失败'
        })
    }
    
}

</script>

<style scoped lang='scss'>

</style>